<template>
  <view class="truckerbox">
    <view class="pic">
      <image src="../../static/img/truck.jpg" mode="aspectFill"></image>
    </view>
    <view class="text">
      <view class="trucker">
        <u style="color: forestgreen;">
          <text style="color: black;">{{Tname}}</text>
        </u>
      </view>
      <view class="info">
        <text>{{Tinfo}}</text>
      </view>

      <view class="buttons">


        <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
          <button class="map" size="mini" style="" @click="onLoc">位置</button>
        </navigator>


        <navigator url="/pages/chatlist/index" hover-class="navigator-hover">
          <button class="chatif" type="primary" size="mini" @click="onchat">沟通</button>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "truckerbox",
    props:["Tname","Tinfo"],
    data() {
      return {

      };
    },
    methods: {
      onLoc() {

      },
      onchat() {

      }
    }
  }
</script>

<style lang="scss">
  .truckerbox {
    display: flex;


    .pic {
      width: 200rpx;
      height: 160rpx;
      

      image {
        width: 100%;
        height: 100%;
      }
    }

    .text {
      flex: 1;
      padding-left: 20rpx;


      .trucker {
        font-size: 40rpx;
        color: #333
      }

      .info {
        font-size: 25rpx;
        color: #999;

        text {
          padding-right: 30rpx;
        }

      }

      .buttons {
        display: flex;
        padding-left: 10rpx;
        justify-content: space-between;
        padding: 5rpx;
        align-items: flex-end;

        .map {
          background-color: seagreen;
          color: #eee;
        }

        .chatif {
          background-color: blueviolet;
          color: 333;
        }

      }
    }
  }
</style>